<script setup>
</script>

<template>
  <router-view></router-view>
</template>

<style>
/* ===全局重置样式=== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul, ol, li {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ===全局 CSS 变量=== */
:root {
  /* 主背景色 */
  --background-color: #f9f7f3;
  /* 导航栏悬浮渐变色 */
  --select-tab-color: linear-gradient(135deg, #0077dd, #33aaff, #99ddff);
  /* 按钮状态渐变色 */
  --recover-color: linear-gradient(135deg, #33cc99, #66ffcc); /* 恢复 */
  --delete-color: linear-gradient(135deg, #ff4c4c, #ff7b7b); /* 删除 */
  --forbidden-color: linear-gradient(135deg, #f0a23c, #ffbf70); /* 禁用 */
}

/* ===全局背景=== */
body, #app {
  min-height: 100vh;
  background: var(--background-color) !important;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  font-family: Arial, sans-serif;
}

/* 恢复按钮 */
button.recover {
  background: var(--recover-color);
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  color: white;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}
button.recover:hover {
  filter: brightness(1.2);
}

/* 删除按钮 */
button.delete {
  background: var(--delete-color);
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  color: white;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}
button.delete:hover {
  filter: brightness(1.2);
}

/* 禁用按钮 */
button.forbidden {
  background: var(--forbidden-color);
  cursor: not-allowed;
  opacity: 0.7;
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  color: white;
  font-weight: bold;
  transition: all 0.3s ease;
}
button.forbidden:hover {
  filter: none;
}
</style>
